<template>
  <div class="mine">
    <div class="user-info-layout">
      <div class="user-infos">
        <van-row class="row-all-user" :gutter="24" type="flex" justify="center" align="center">
          <van-col span="6">
            <div class="header-img">
              <img width="100%" :src="headerImg" style="border-radius: 50%;" fit="fill" />
            </div>
          </van-col>
          <van-col span="18">
            <div class="title-name">张三11</div>
            <div class="title-sign">个性签名11321个性签名11321个性签名11321个性签名11321</div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div style="padding: 10px 20px;">
      <van-row class="user-event" :gutter="24" type="flex" justify="center" align="center">
        <van-col span="2">
          <van-icon name="star" style="font-size: 28px; color: orangered;" />
        </van-col>
        <van-col span="20">
         我的预约
        </van-col>
      </van-row>
      <van-row class="user-event-mgevent" :gutter="24" type="flex" justify="center" align="center">
        <van-col span="2">
          <van-icon name="comment" style="font-size: 28px; color: blue;vertical-align: middle;" />
        </van-col>
        <van-col span="20">
         我的事项
        </van-col>
      </van-row>
    </div>
    <div class="login-out">
      <van-button color="linear-gradient(90deg, #01c196 0%, #33d170 100%)" style="width: 100%;letter-spacing: 2px;">退出登录</van-button>
    </div>
    
    <!-- <van-nav-bar title="我的" />
    <div class="content">
      <van-button type="primary" @click="handleToast">点击测试</van-button>
      <div class="demo-box">
        <p class="text">这是一段测试文字</p>
        <div class="box"></div>
      </div> -->
    <!-- </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { showToast } from 'vant'
const headerImg = ref(
  Object.values(
    import.meta.glob('@assets/header.png', { eager: true, as: 'url' })
  )
)
// const handleToast = () => {
//   showToast('测试成功')
// }
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  box-sizing: border-box;
  height: 100vh;
  // .content {
  //   padding: 16px;

  //   .demo-box {
  //     margin-top: 20px;

  //     .text {
  //       font-size: 14px;
  //       margin-bottom: 10px;
  //     }

  //     .box {
  //       width: 100px;
  //       height: 100px;
  //       background-color: #3f45ff;
  //       border-radius: 8px;
  //     }
  //   }
  // }
}

.user-info-layout {
  width: 100%;
  box-sizing: border-box;
  height: 140px;
  padding: 10px 20px;

  .user-infos {
    background: linear-gradient(to bottom, #01c196 0%, #33d170 100%) !important;
    width: 100%;
    height: 120px;
    border-radius: 20px;
    box-sizing: border-box;

    .row-all-user {
      width: 100%;
      height: 120px;
      box-sizing: border-box;
      color: #fff;

      .header-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        // background-color: #fff;
        margin-left: 10px;
      }

      .title-name {
        line-height: 28px;
        font-size: 18px;
        margin-bottom: 10px;
      }

      .title-sign {
        line-height: 20px;
        font-size: 14px;
      }
    }
  }
}

.user-event {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, #F8EEE4 0%, #FFFAEB 100%);
  border-radius: 10px;
  line-height: 28px;
  padding: 10px 0;
}
.user-event-mgevent {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient( 90deg, #E4F1F8 0%, #EBF6FF 100%);
  border-radius: 10px;
  line-height: 28px;
  padding: 10px 0;
}
.login-out {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 20px;
  letter-spacing: 2px;
}
</style>

